<template>
  <view class="preview-container" @click="pic = null" v-if="pic">
    <view class="pic" :style="{'background-image': styleBgImageUrl(pic)}" v-if="pic"></view>
  </view>
</template>
<script>
import {styleBgImageUrl} from "../../libs/utils";

export default {
  name: "Preview",
  data() {
    return {pic: null}
  },
  methods: {
    styleBgImageUrl,
    show(pic) {
      this.pic = pic
    }
  }
}
</script>
<style scoped lang="scss">
.preview-container {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  .pic {
    height: 100%;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
}
</style>